import React, { Component } from 'react'
import { Modal, Form, Input, Select } from 'antd'
import { connect } from 'dva'

@connect(({ user, role, loading }) => ({ 
    roleListNoPaging: role.roleListNoPaging,
    upAddInfo: user.upAddInfo,
}))
class UserModal extends Component {

    
    handleChange = selectedItems => {

      };

    handleOk = ()=>{
        const { dispatch, upAddInfo, form } = this.props
        form.validateFields(
            (err) => {
                if (!err) {
                    const {username, phone, password, roleList } = form.getFieldsValue();
                    console.log(username, phone, password, roleList)
                    dispatch({
                        type: upAddInfo.action,
                        payload: {
                            id: upAddInfo.id,
                            username: username,
                            phone: phone,
                            password: password,
                            roleIdList: roleList
                        }
                    })
                    dispatch({
                        type: 'user/setUpAddInfo',
                        payload: {
                            title: "",
                            visible: false,
                            action: false,
                        }
                    })
                }
            },
        );
    }

    handleCancel = ()=>{
        const { dispatch } = this.props
        dispatch({
            type: 'user/setUpAddInfo',
            payload: {
                title: "",
                visible: false,
                action: false,
            }
        })
    }

    render() {
        const {
            upAddInfo,
            roleListNoPaging,
            form: { getFieldDecorator, setFieldsValue }
        } = this.props

        return (
            <div>
                <Modal
                    title={upAddInfo.title}
                    visible={upAddInfo.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="确认"
                    cancelText="取消"
                    >
                    <Form>
                        <Form.Item
                            {...this.formItemLayout}
                            label="用户名"
                            >
                            {getFieldDecorator('username', {
                                rules: [{
                                    required: true, whitespace: true, message: '请输入用户名',
                                }],
                            })(
                                <Input disabled = {upAddInfo.action === 'user/fetchAddUser' ? false : true}/>
                            )}
                        </Form.Item>
                        <Form.Item
                            {...this.formItemLayout}
                            label="电话"
                            >
                            {getFieldDecorator('phone', {
                                rules: [{ required: true, whitespace: true, message: '请输入电话号' }],
                            })(
                                <Input addonBefore={"+86"} style={{ width: '100%' }} />
                            )}
                        </Form.Item>
                        <Form.Item
                            {...this.formItemLayout}
                            label="密码"
                            >
                            {getFieldDecorator('password', {
                                rules: [{
                                    required: upAddInfo.action === 'user/fetchAddUser' ? true : false, whitespace: true, message: '请输入密码'
                                }],
                            })(
                                <Input />
                            )}
                        </Form.Item>
                        <Form.Item
                            {...this.formItemLayout}
                            label="角色"
                            >
                            {getFieldDecorator('roleList')(
                                <Select
                                    mode="multiple"
                                    placeholder="点击选择角色"
                                    onChange={this.handleChange}
                                    style={{ width: '100%' }}
                                >
                                    {roleListNoPaging.map(item => (
                                        <Select.Option key={item.id} value={item.id}>
                                            {item.name}
                                        </Select.Option>
                                    ))}
                                </Select>
                            )}
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }

    componentDidMount(){
        const { dispatch } = this.props
        dispatch({
            type: 'role/fetchSelRoleAllNoPaging',
        })
    }

    componentDidUpdate(){
        const {
            upAddInfo,
            form: { setFieldsValue }
        } = this.props
        if(upAddInfo.isUpdate){
            const filteredIds = upAddInfo.roleList.map(o =>  o.id);
            setFieldsValue({
                'username': upAddInfo.username,
                'phone': upAddInfo.phone,
                'password': upAddInfo.password,
                'roleList': filteredIds
            })
            upAddInfo.isUpdate = false
        }
    }
}

const UserModalForm = Form.create({})(UserModal);
export default UserModalForm
